<template>
	<view class="u-p-l-10 u-p-r-10">
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar :title="title" @rightClick="rightClick" :autoBack="true" bgColor="#aa0000">
			</u-navbar>
		</view>
		<view>
			<u-form :model="form" ref="uForm" label-width="150">
				<u-form-item label="诉求主题" prop="title"><u-input v-model="form.title" /></u-form-item>
				<u-form-item label="诉求内容" prop="content"><u-input v-model="form.content" /></u-form-item>
				<u-form-item label="您的姓名" prop="name"><u-input v-model="form.name" /></u-form-item>
				<u-form-item label="手机号" prop="phone"><u-input v-model="form.phone" /></u-form-item>
				<u-form-item label="诉求类型" prop="askType">
					<u-input v-model="form.askType" type="select" @click="typeShow = true" />
				</u-form-item>
				<u-form-item label="是否公开" prop="isOff">
					<u-radio-group v-model="form.isOff">
						<u-radio v-for="(item, index) in checkboxList" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="接收部门" prop="receivingDept">
					<u-input v-model="form.receivingDept" type="select" @click="sectionShow = true" />
				</u-form-item>

				<u-form-item label="上传图片">
					<u-upload max-count="1" ref="uUpload" :action="action" auto-upload="true"
						:file-list="fileList"></u-upload>
				</u-form-item>
				<u-button @click="submit">提交</u-button>
			</u-form>
			<u-action-sheet :tips="typeTips" :list="typeList" v-model="typeShow"
				@click="typeActionSheetCallback"></u-action-sheet>
			<u-action-sheet :tips="sectionTips" :list="sectionList" v-model="sectionShow"
				@click="sectionActionSheetCallback"></u-action-sheet>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import config from "@/common/config.js" // 全局配置文件
	export default {
		data() {
			return {
				title: '',
				typeShow: false,
				sectionShow: false,
				action: config.staticUrl + '/common/upload',
				fileList: [],
				swiperList: [{
						image: 'https://img-u-3.51miz.com/preview/muban/00/00/58/68/M-586833-C032DFF8.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://ts1.cn.mm.bing.net/th/id/R-C.28c73d9fca11fd7423b21e282c541e26?rik=bHXZkcjWxOGYsA&riu=http%3a%2f%2fimg.aiimg.com%2fuploads%2fallimg%2f220220%2f263915-220220111H0.jpg&ehk=LiOMe7vgY3xS77DbmVyOXcjYtgzid4qqJLK1yeJWQFA%3d&risl=&pid=ImgRaw&r=0',
						title: '身通'
					},
				],
				form: {
					name: '',
					title: '',
					content: '',
					phone: '',
					receivingDept: '',
					askType: '',
					isOff: '不公开',
					picPath: '',
					heartfeltType: ""
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					title: [{
						required: true,
						message: '请输入诉求主题',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					content: [{
						required: true,
						message: '请输入诉求内容',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					receivingDept: [{
						required: true,
						message: '请选择接收部门',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					askType: [{
						required: true,
						message: '请选择诉求类型',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					isOff: [{
						required: true,
						message: '请选择是否公开',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				typeTips: {
					text: '请选择类型',
					color: '#909399',
					fontSize: 24
				},
				sectionTips: {
					text: '请选择接收部门',
					color: '#909399',
					fontSize: 24
				},
				typeList: [{
						text: '其他'
					},
					{
						text: '教育教学'
					},
					{
						text: '公安消防'
					}
				],
				sectionList: [{
					text: '胡子物流集团党支部'
				}],

				checkboxList: [{
						name: '公开',
						checked: false,
						disabled: false
					},
					{
						name: '不公开',
						checked: false,
						disabled: false
					},
				],
				switchVal: false
			};
		},
		onLoad(option) {
			this.title = option.title
		},
		methods: {
			submit() {
				// 准备数据
				let picPath = '';
				if (this.$refs.uUpload.lists.length > 0) {
					picPath = this.$refs.uUpload.lists[0].response.url;
					this.form.picPath = picPath;
				}
				this.form.isOff = this.form.isOff == "公开" ? 0 : 1
				this.form.heartfeltType = this.title;
				if (this.form.heartfeltType === '咨询问题') {
					this.form.heartfeltTypeInt = 0;
				} else if(this.form.heartfeltType === '投诉建议'){
					this.form.heartfeltTypeInt = 1;
				}else if(this.form.heartfeltType === '求助接单'){
					this.form.heartfeltTypeInt = 2;
				}else{
					this.form.heartfeltTypeInt = 3;
				}
				this.form.userId = uni.getStorageSync('lifeData').vuex_user.user.userId;
				//验证数据
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 调用后端接口
						var url = "/api/artApi/partyHeartfelt"
						this.$u.post(url, this.form).then(result => {
							// debugger
							if (result.code === 200) {
								this.$refs.uToast.show({
									title: '已提交',
									type: 'success',
									url: '/pages/index/index',
									isTab: true
								})
							}
						});
					}
				});
			},
			confirm(e) {
				console.log(e);
			},
			typeActionSheetCallback(index) {
				uni.hideKeyboard();
				this.form.askType = this.typeList[index].text;
			},
			sectionActionSheetCallback(index) {
				uni.hideKeyboard();
				this.form.receivingDept = this.sectionList[index].text;
			},

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>